<template>
  <!--  <el-button>button</el-button>-->
  <div style="padding: 10px">
    <!--    功能区域-->
    <!-- 显示库存表格 -->
    <div>
      <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="IT库存新资产" name="first">
          <el-table
            :data="newTableData"
            border
            stripe
            style="width: 100%">
            <el-table-column prop="code" label="固定资产编码" sortable width="180">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" sortable width="180">
            </el-table-column>
            <el-table-column prop="type" label="设备型号" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="time" label="入库时间" sortable :formatter="formatter">
            </el-table-column>
            <el-table-column prop="rfid" label="RFID编码" sortable :formatter="formatter">
            </el-table-column>
            <el-table-column prop="ps" label="备注" :formatter="formatter">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="IT库存旧资产" name="second">IT库存旧资产</el-tab-pane>
        <el-tab-pane label="报废资产" name="third">报废资产</el-tab-pane>
      </el-tabs> -->

      <div class="block">
        <span class="demonstration" style="padding-right: 10px"
          >各部门资产</span
        >
        <!-- <el-select v-model="value" filterable placeholder="查看部门">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select> -->

        <el-cascader
          v-model="value.store"
          :options="options"
          @change="handleChange"
          :props="defaultParams"
          style="padding-right: 20px"
        ></el-cascader>

        <span class="demonstration" style="padding-right: 10px">资产类型</span>
        <el-select
          v-model="value.device"
          filterable
          clearable
          placeholder="设备类型"
          @change="whichDevice"
        >
          <el-option
            v-for="item in device"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 资产列表 -->
      <div style="padding-top: 20px">
        <el-table :data="TableData" border stripe style="width: 100%">
          <el-table-column
            prop="code"
            label="固定资产编码"
            sortable
            width="180"
          >
          </el-table-column>
          <el-table-column prop="name" label="设备名称" sortable width="180">
          </el-table-column>
          <el-table-column prop="type" label="设备型号" :formatter="formatter">
          </el-table-column>
          <el-table-column
            prop="time"
            label="入库时间"
            sortable
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column
            prop="rfid"
            label="RFID编码"
            sortable
            :formatter="formatter"
          >
          </el-table-column>
          <el-table-column prop="ps" label="备注" :formatter="formatter">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="demo-pagination-block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[14, 40, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!--    新增表单-->
    <!--   调拨表单 -->
  </div>
</template>




<script>
import request from "../utils/request";

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 14,
      total: "",
      search: "",
      TableData: [],
      newTableData: [],
      mid: [],
      defaultParams: {
        label: "name",
        value: "name",
      },
      value: [],
      ttt: {},
      tttt: {},
      device: [
        {
          value: "主机",
          label: "主机",
        },
        {
          value: "显示器",
          label: "显示器",
        },
        {
          value: "打印机",
          label: "打印机",
        },
        {
          value: "电话机",
          label: "电话机",
        },
        {
          value: "扫描枪",
          label: "扫描枪",
        },
        {
          value: "笔记本",
          label: "笔记本",
        },
        {
          value: "投影仪",
          label: "投影仪",
        },
      ],
      options: [],
      optionssss: [],
    };
  },
  created() {
    // console.log(1111);
    // this.getnewtabledata();
    this.getstore();
    this.load();
  },
  methods: {
    load() {
      request
        .get("/api/goods/device", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search,
            device: this.value.device,
          },
        })
        .then((res) => {
          this.TableData = res.data.records;
          this.total = res.data.total;
          this.newTableData = this.TableData;
          console.log(res);
        });
    },
    handleChange(value) {
      // console.log(value[0]);
      this.search = value[0];
      this.load();
    },
    getstore() {
      request.get("/api/store").then((res) => {
        if (res.code === "0") {
          this.store = res.data.records;
          console.log(this.store);
          this.options = this.store;
          // this.options[0].children = this.device;
          // console.log(this.options);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    whichDevice(a) {
      console.log(a);
      console.log(this.TableData);
      request
        .get("/api/goods/device", {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
            search: this.search,
            device: a,
          },
        })
        .then((res) => {
          // console.log(this.value.device);
          this.TableData = res.data.records;
          this.total = res.data.total;
        });
      // this.mid = []
      // this.value.device = ''
      // for(let item of this.newTableData) {
      //   if(item.name === a){
      //     this.mid.push(item)
      //     console.log(this.mid);

      //   }
      // }
      // this.TableData = this.mid
      // this.total = this.mid.length
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(pageSize) {
      //改变当前每页个数触发
      this.pageSize = pageSize;
      this.load();
    },
    handleCurrentChange(pageNum) {
      //改变当前页码触发
      this.currentPage = pageNum;
      this.load();
    },
  },
};
</script>